﻿<style>
    body {
        background-color: #fff;
        overflow-y: scroll;
    }

    .rtTitle {
        font-size: 17px;
        padding: 3px;
        color: #025605;
        font-family: inherit;
    }

    .rtRow {
        padding: 3px;
        font-family: inherit;
    }

    .spanTitle {
        font-size: 13px;
        font-weight: 300;
        color: #848282;
        font-family: inherit;
    }

    .spanText {
        font-size: 13px;
        font-family: inherit;
    }

    .marginCol6 {
        margin: 3px;
    }

    .tagSpan {
        padding: 2px;
        background-color: #00a007;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        margin-left: 3px;
        border-radius: 2px;
    }

    .fiterLog {
        display: inlne-block;
        padding: 5px;
        background-color: #f00;
        color: #fff;
    }

    .filterContent {
        padding: 5px;
        font-size: 12px;
    }

    .searchInput {
        border: 1px solid #ddd;
        padding: 11px;
        width: 30vw;
        min-width: 150px;
        height: 45px;
    }

        .searchInput:focus {
            border: 1px solid #71ba51;
            outline: none;
        }

    .filterItem {
        padding: 5px;
        border: 1px solid #ddd;
        overflow: hiddem;
        list-style-type: none;
        margin-top: 3px;
        background-color: #eee;
    }

        .filterItem:hover {
            border: 1px solid #f00;
            background-color: #fff;
            cursor: pointer;
        }

        .filterItem .removeitem {
            color: #fff;
            background-color: #ef0b0b;
            padding: 3px;
        }

    .removeA {
        font-size: 13px;
        color: #888;
        cursor: pointer;
        text-decoration: underline;
    }

        .removeA:hover {
            color: #f00;
        }

    .dataItem {
        border: 1px solid #d1d6d1;
        border-radius: 3px;
        padding: 3px 10px;
        margin-bottom: 10px;
    }

        .dataItem:hover {
            background-color: #e1f5e2;
        }

    .fixDiv {
        padding: 5px;
        width: 220px;
        background-color: #d2f9d2;
        position: fixed;
        top: 150px;
        right: 0px;
        z-index: 100;
    }

        .fixDiv .item {
            padding: 10px;
            border: 1px dashed #4CAF50;
            color: #2f9204;
            font-size: 14px;
            margin: 5px;
            border-radius: 3px;
        }

        .fixDiv .wayItem {
            font-size: 30px;
            cursor: pointer;
            color: #aaa;
        }

            .fixDiv .wayItem:hover {
                color: #333;
            }

        .fixDiv .showmorebtn {
            color: #4CAF50;
            cursor: pointer;
            text-decoration: underline;
        }

            .fixDiv .showmorebtn:hover {
                color: #f00;
            }

    .popList {
        width: 29.6vw;
        border: 1px solid #ddd;
        min-height: 60px;
        position: absolute;
        background-color: #fff;
        z-index: 3;
        padding: 0px 5px;
    }

        .popList ul {
            margin: 0px;
            padding: 0px;
        }

            .popList ul li {
                padding: 5px;
                border-bottom: 1px dashed #ddd;
                overflow: hiddem;
                list-style-type: none;
                margin-top: 3px;
                cursor: pointer;
            }


    .fixFilter {
        padding: 9px;
        width: 35px;
        height: 35px;
        background-color: #54b158;
        border: 1px dashed #f8fdf8;
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 50px;
        z-index: 100;
        color: #fff;
        cursor: pointer;
        font-size: 15px;
    }

        .fixFilter:hover {
            color: #FFEB3B;
        }
</style>
<div ng-app="myApp" ng-controller="appController" class="container">
    <div>
        <div class="search-wraper" role="search"><div class="form-group"><input class="form-control search clearable" placeholder="搜索开源库，例如：jquery" autocomplete="off" autofocus="" tabindex="0" autocorrect="off" autocapitalize="off" spellcheck="false"> <i class="fa fa-search"></i></div></div>
    </div>


    <div class="fixDiv hidden-xs hidden-sm" ng-hide="datalist.length==0">
        <div style="color:#fff;font-size:20px;text-align:center;margin-bottom:20px;"><span class="glyphicon glyphicon-chevron-up wayItem" title="Go to top"></span></div>
        <div class="item"><span class="glyphicon glyphicon-menu-hamburger"></span>&nbsp;Total Documents <a href="#"><span class="badge ng-binding" style="background-color: #037908;color: #f2f7f2;">{{SearchResultItem.Total}}</span></a></div>
        <div class="item"><span class="glyphicon glyphicon-option-vertical"></span>&nbsp;Loaded Documents <a href="#"><span class="badge ng-binding" style="background-color: #037908;color: #f2f7f2;">{{datalist.length}}</span></a></div>
        <div class="item">
            <div ng-hide="busy==2"><span class="glyphicon glyphicon-menu-down"></span><span class="showmorebtn" ng-click="CallSearch('more')"> Show next {{SearchResultItem.RecordPerPage}} documents </div>
            <div ng-show="busy==2"><span class="glyphicon glyphicon-flag"></span> <span> Already loaded all </span></div>
        </div>
        <div style="color:#fff;font-size:20px;text-align:center;margin-top:20px;"><span class="glyphicon glyphicon-chevron-down wayItem" title="Go to bottom"></span></div>
        <div></div>
    </div>
    <div class="row" style="margin:20px 0px;">
        <div class="col-sm-3">
            <div class="fixFilter" title="Show filters" ng-hide="!filterHide" ng-click="filterHide=false"><span class="glyphicon glyphicon-filter"></span></div>
        </div>
        <div class="col-sm-9">
            <div>
                <div style="text-align:left;">
                    <input ng-model="searchkey" ng-keyup="CallLikeSearch()" ng-click="likeClick()" class="searchInput" />
                    <button type="button" class="btn btn-success btn-lg" ng-click="CallSearch('init')" style="margin-left:-10px;margin-top:-3px;">Search</button>
                </div>
                <div class="popList" ng-show="autoShow">
                    <ul>
                        <li ng-repeat="o in AutoResultList" ng-click="likeSearch(o.Title)">{{o.Title}}</li>
                        <li style="border:0px;text-align:right;"><span class="removeA" ng-click="autoShow=false;">Close</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top:20px;">
        <div class="col-sm-12 col-md-3" ng-hide="filterHide">

            <div style="background-color:#71ba51;padding:5px;color:#fff;cursor:pointer;" ng-click="filterHide=true">
                <span class="glyphicon "></span>
                <span style="font-size:16px;">&nbsp;Documents</span>&nbsp;&nbsp;<a href="#"><span class="badge" style="background-color:#fff;color:#047d09;">{{SearchResultItem.Total}}</span></a>
                <span class="pull-right glyphicon glyphicon-triangle-top"></span>
            </div>
            <div style="border:1px solid #eee;border-top:0px;">
                <div ng-repeat="bo in filterData">
                    <div ng-click="bo.show=!bo.show" style="text-align:left;padding:3px;border:1px solid #eee;padding-left:10px;border-right:0px;background-color:#f5f5f5;color:#07880c;cursor:pointer;"><span class="glyphicon glyphicon-stop" style="font-size:11px;color:#b9b8b8;"></span><span>&nbsp;&nbsp;{{bo.DisplayName}}</span>&nbsp;&nbsp;<span class="badge" style="background-color:#71ba51">{{bo.Count}}</span></a></span><span class="glyphicon  pull-right" ng-class="{'glyphicon-chevron-down':!bo.show,'glyphicon-chevron-up':bo.show}" style="margin-top:2px;"></span></div>
                    <div style="padding:0px 5px;margin-top:5px;" ng-show="bo.show">
                        <div style="padding:2px 0px; padding-left:5px;border-top:0px dashed #eee;cursor:pointer;" ng-repeat="o in bo.Mapping" ng-click="select(o)"><span class="glyphicon " ng-class="{'glyphicon-unchecked':!o.checked,'glyphicon-check':o.checked}" style="font-size:14px;cursor:pointer;color:#7d7d7d;"></span><span style="display:inline-block;padding-left:3px;font-size:14px;color:#888;">{{o.Value}}</span><span class="pull-right"><a href="#"><span class="badge pull-right" style="background-color:#e4e4e2;color:#047d09;">{{o.Count}}</span></a></span></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm-12" ng-class="{'col-md-9':!filterHide,'col-md-12':filterHide}">

            <div style="border:1px solid #ddd;margin-bottom:20px;" ng-show="SearchItems.length>0">
                <div style="padding:3px;border-bottom:1px solid #71ba51;background-color:#71ba51;color:#fff;cursor:pointer;" ng-click="filterShow=!filterShow"><span class="glyphicon glyphicon-filter"></span> Filter <span class="glyphicon  pull-right" ng-class="{'glyphicon-chevron-up':filterShow,'glyphicon-chevron-down':!filterShow}"></span></div>
                <div class="filterContent" ng-show="filterShow">
                    <div>
                        <ul style="margin:0px;padding:0px;">
                            <li ng-repeat="o in SearchItems" class="filterItem"><span style="color:#f00;">{{o.name}}:&nbsp;</span>{{o.item}}<span class="glyphicon glyphicon-remove removeitem" ng-click="removeFilter(o)"></span></li>
                        </ul>
                    </div>
                    <div style="padding-top:10px;text-align:right;" ng-show="SearchItems.length>1"><a class="removeA" ng-click="removeFilter('all')"><span class="glyphicon glyphicon-remove"></span> Clear all</a></div>
                </div>
            </div>

            <div style="padding:40px 0px;text-align:center;border:1px solid #d1f5d2;background-color:#f4fbf4;border-radius: 3px;font-size:20px;color:#aaa;" ng-show="datalist.length==0&&busy!=1">
                <span class="glyphicon glyphicon-info-sign"></span><span>&nbsp;&nbsp;No document.</span>
            </div>

            <div class="row" ng-show="datalist.length>0">
                <div ng-repeat="o in datalist" class="col-md-12 " ng-class="{'col-lg-5':filterHide}">
                    <div style="padding:3px;">
                        <a href="{{o.url}}" target="_blank">
                            <div class="dataItem">
                                <div class="row">
                                    <div style="border-bottom:1px solid #ddd;padding:5px;">
                                        <div class="rtTitle">{{o.Title}}&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-file"></span></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-4 col-sm-3" style="padding:2px;" ng-class="{'col-md-2 col-lg-3':filterHide,'col-md-4 col-lg-2':!filterHide}">
                                        <div ng-show="o.imgSrc=='none'"><img src="http://www.fjyclound.cn/files/upload/default_myfile_201965d16h54m5s346.bmp" style="width:100%;" /></div>
                                        <div ng-show="o.imgSrc!='none'"><img src="{{o.imgSrc}}" style="width:100%;" /></div>
                                    </div>
                                    <div class="col-xs-8 col-sm-9" ng-class="{'col-md-10 col-lg-9':filterHide,'col-md-8 col-lg-10':!filterHide}">
                                        <div class="rtRow"><span class="spanTitle">Document type :</span><span class="spanText">{{o.ContentType}}</span></div>
                                        <div class="rtRow"><span class="spanTitle">Document format :</span><span class="spanText">{{o.Format}}</span></div>
                                        <div class="rtRow"><span class="spanTitle">Expired date:</span><span class="spanText">{{o.ExpirationDate}}</span><span style="padding:2px;background-color:#00a007;color:#fff;border-radius:2px;display:inline-block;margin-left:3px;padding:0px 5px;"> It will expire after {{o.ExpirationDays}} days</span></div>
                                        <div class="rtRow"><span class="spanTitle">Document size :</span><span class="spanText">{{o.DocumentSize}}</span></div>
                                        <div class="rtRow"><span class="spanTitle">Tag :</span><span class="tagSpan" ng-repeat="t in o.Tag">{{t}}</span></div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div style="border-top:1px solid #ddd;padding:5px;">
                                        <div class="pull-left"><span class="spanTitle"><span class="glyphicon glyphicon-user" style="color:#aaa"></span>&nbsp;&nbsp;&nbsp;Author:</span><span class="spanText">{{o.DocumentOwner}}</span></div>
                                        <div class="pull-right"><span class="spanTitle"><span class="glyphicon glyphicon-calendar" style="color:#aaa"></span>&nbsp;&nbsp;Create date:</span><span class="spanText">{{o.CreateDate}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div style="padding:10px;border:1px solid #e2dede;background-color:#fff;color:#FF5722;margin:10px 0px; text-align:center;" ng-show="busy==1">
                Data is loading...
            </div>
            <div style="text-align:center;padding:30px;" ng-show="busy==0"><button type="button" class="btn btn-primary" ng-click="CallSearch('more')">Show more</button></div>
        </div>
    </div>
    <div class="row" ng-hide="true">{{Search}}</div>
</div>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://appcn.digitalmaker.pwccn.com/Content/DateTimePicker/js/bootstrap-datetimepicker.js?_t=20190524014049808"></script>
<script src="https://cdn.bootcss.com/angular.js/1.2.5/angular.min.js"></script>
<script>
  function getBaseurl(){
    return "https://appcn.digitalmaker.pwccn.com/dlcmstestdrive/dlcmsvopo";
  }

</script>

<script>
    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
    var StaffCode = currentUser.StaffCode;
    var UserID = currentUser.UserID;

    var app = angular.module('myApp', []);
    app.controller('appController', function ($scope, $http) {
      $scope.filterShow=true;
      $scope.Search = "abcd";







        $scope.findDatas=function(SourceIDS,list){
           var searchItem = [];
            searchItem.push({
                Method: "And",
                Operator: "In",
                Name: "_id",
                Value: SourceIDS
            });
           var requrl = getBaseurl()+"/CustomApi/RetrieveQueryDocs";
            var Jsondata = {};
            Jsondata.Token = "";
            Jsondata.EntityName = "o7hxn3ou8sn";
            Jsondata.size = 1000000;
            Jsondata.index =0;
            Jsondata.SearchItem = searchItem;
            Jsondata.Order = { "C4-ModifyDate": "Descending" };
         $http.post(requrl, Jsondata).success(function (response) {
           console.log("$scope.findDatas",response);
            angular.forEach(response.Data.rows, function (o){
             var df=o.DocumentFile==""?JSON.parse(o.DocumentMultipleFile):JSON.parse(o.DocumentFile);
              if(o.DocumentFile!="")
             for(i=0;i<list.length;i++){
                if(list[i]._id==o._id){
                  list[i].imgSrc=df[0].imgSrc;
                  list[i].CreateDate=moment(o["C4-CreateDate"]).format("YYYY-MM-DD HH:mm");
                  break;
                }
              }
            });
         });
      };










      $scope.processList = function (list) {
           var _ids="";
            angular.forEach(list, function (o) {
               _ids=_ids==""?o.SourceID:_ids+"|C4|"+o.SourceID;

                var k = {
                    "Title": o.Title,
                    "ContentType": o.ContentType,
                    "CreateDate": moment(o.CreateDate).format("YYYY-MM-DD HH:mm"),
                    "ExpirationDate":  moment(o.ExpirationDate).format("YYYY-MM-DD"),
                    "_id": o.SourceID,
                    "url": o.NoNotesExternalSourceURL,
                    "ExpirationDays":o.ExpirationDays,
                    "Format":o.Format,
                     "Tag":o.Tag,
                     "DocumentSize":o.DocumentSize,
                     "DocumentOwner":o.DocumentOwner,
                     "imgSrc":"none",
                };
                 $scope.datalist.push(k);
            });
             $scope.findDatas(_ids,$scope.datalist);
        };














      $scope.filterData=[];
      $scope.processFilters=function(StatisticResult){
          var oldFilters=$scope.filterData;
          $scope.filterData=StatisticResult;
          angular.forEach($scope.filterData, function (o) {
             for(i=0;i<oldFilters.length;i++){
               var k=oldFilters[i];
               if(k.DisplayField==o.DisplayField){
                 o.show=k.show;
                  	 angular.forEach(o.Mapping,function(x){
                     for(j=0;j<k.Mapping.length;j++){
                        var g=k.Mapping[j];
                        if(x.Value==g.Value){x.checked=g.checked;break;}
                      }
                    });
               }
             }
          });
      };









      $scope.autoShow=false;
      $scope.CallLikeSearch=function(){
         if($scope.searchkey=='')
         { $scope.AutoResultList=[];$scope.autoShow=false;return;}
        var Jsondata={
              "t": "All",
              "q": $scope.searchkey,
              "f": "",
              "s": "",
              "p": 1
          };
          var requrl=getBaseurl()+"/Admin/Home/ESSearchResultByType";
           $http.post(requrl, Jsondata).success(function (response) {
             var searchResult=JSON.parse(JSON.parse(response));
             var SearchResultItem=JSON.parse(searchResult.ass.SearchSettings[1].SearchResultItem);
             var AutoResultList=SearchResultItem.ResultList;
             $scope.AutoResultList=AutoResultList;
             if(AutoResultList==undefined)$scope.autoShow=false;
             else{
              $scope.autoShow=AutoResultList.length>0?true:false;
             }
             console.log("AutoResultList", AutoResultList);
        })};















       $scope.searchkey="";
       $scope.SearchResultItem=[];
       $scope.datalist=[];
       $scope.pageIndex=1;
       $scope.busy=0;
       $scope.SearchFilter="ExpirationDate__RDate01/05/2019-31/12/2023";
       $scope.CallSearch=function(Seachtype){
         if($scope.busy==1)return;
          $scope.busy=1;
         if(Seachtype=='more'){
           $scope.pageIndex +=1;
           }
         else{
            $scope.autoShow=false;
           $scope.datalist=[];
           $scope.pageIndex=1;
         }
          var Jsondata={
              "t": "Documents",
              "q": $scope.searchkey,
              "f": $scope.SearchFilter,
              "s": "",
              "p": $scope.pageIndex
          };
          var requrl=getBaseurl()+"/Admin/Home/ESSearchResultByType";
           $http.post(requrl, Jsondata).success(function (response) {
             var searchResult=JSON.parse(JSON.parse(response));
             console.log(searchResult);
             var SearchResultItem=JSON.parse(searchResult.ass.SearchSettings[1].SearchResultItem);
             $scope.SearchResultItem=SearchResultItem;


             var StatisticResult=SearchResultItem.StatisticResult;
             $scope.processFilters(StatisticResult);
             console.log("StatisticResult",StatisticResult);


             console.log("SearchResultItem",SearchResultItem);
             var ResultList=SearchResultItem.ResultList;
             console.log("ResultList",ResultList);
             if(ResultList==undefined||ResultList.length<SearchResultItem.RecordPerPage)$scope.busy=2;
             else $scope.busy=0;
             $scope.processList(ResultList);
             console.log("$scope.datalist", $scope.datalist);
        })};
       $scope.CallSearch('init');











      $scope.SearchItems=[];
      $scope.select=function(o){

        $scope.SearchItems=[];
        if(o!='')o.checked=!o.checked;
        $scope.SearchFilter="ExpirationDate__RDate01/05/2019-31/12/2023";
        angular.forEach($scope.filterData, function (k){
            var exist=false;
            var searchItem="";
            var displayItem="";
            for(i=0;i<k.Mapping.length;i++){
               var g=k.Mapping[i];
               if(g.checked){
                 exist=true;
                 searchItem=searchItem+="__"+g.Value;
                 displayItem=displayItem==""?g.Value:displayItem+=" 、"+g.Value;
               }
             }
            if(searchItem!=""){
              searchItem=k.DisplayField+searchItem;
              $scope.SearchFilter+=$scope.SearchFilter==""?searchItem:"||"+searchItem;
              $scope.SearchItems.push({name:k.DisplayName,item:displayItem});
            }
        });
        console.log($scope.SearchFilter);
        $scope.CallSearch('init');
      };








      $scope.likeClick=function(){
        if($scope.searchkey!=''&&$scope.AutoResultList.length>0)$scope.autoShow=true;
      };








      $scope.likeSearch=function(title){
        $scope.AutoResultList=[];
         $scope.AutoResultList.push({Title:title});
         $scope.autoShow=false;
         $scope.searchkey=title;
         $scope.SearchFilter="";
         $scope.filterData=[];
         $scope.SearchItems=[];
         $scope.CallSearch('init');
      };










     $scope.removeFilter=function(o){
       angular.forEach($scope.filterData, function (k){
         if(o=='all'||k.DisplayName==o.name){
         for(i=0;i<k.Mapping.length;i++){
             k.Mapping[i].checked=false;
           }
       }});
       $scope.select('');
     };








    });
</script>